
/* 折线图组件对象 */
var H5ComponentPolyline = function (name,cfg) {
    /* 基本图文组件对象 */
    var cfg = cfg || {};
    var className = ' h5_component_'+cfg.type;// 组件类型
    var component = $('<div class="h5_component '+className+' h5_component_name_'+name+'"></div>');

    var body = $('body');
    var winWidth = body.width();
    var pei = winWidth/720;

    cfg.text   && component.text(cfg.text);
    cfg.width  && component.width(cfg.width*pei/2);
    cfg.height && component.height(cfg.height*pei/2);
    cfg.css    && component.css(cfg.css);

    if(cfg.center === true){
        component.css({
            left: '50%',
            transform:'translate3d(-50%,0,0)',
        })
    }

    // …… 很多自定义参数
    if( typeof cfg.onclick === 'function' ){
        component.on('click',cfg.onclick);
    }
    /* 组件入场、出场动画 */
    component.on('onLeave', function () {
        component.addClass(className+'_leave').removeClass(className+'_load');
        cfg.animateOut && component.animate(cfg.animateOut);
        return false; //阻止事件冒泡
    }).on('onLoad', function () {
        setTimeout(function () {
            component.addClass(className+'_load').removeClass(className+'_leave');
            cfg.animateIn && component.animate(cfg.animateIn);
        },cfg.delay || 0);

        return false; //阻止事件冒泡
    });

/* 折线图 */

    // 绘制网格线
    var w = cfg.width*pei;
    var h = cfg.height*pei;

    // 加入一个画布--背景层
    var canvas =document.createElement('canvas');
    var ctx =canvas.getContext('2d');
    canvas.setAttribute('class','bg');
    canvas.width = ctx.width = w;
    canvas.height = ctx.height = h;

    var step = 10 ;

    ctx.beginPath();
    ctx.lineWidth = 1 ;
    ctx.strokeStyle = '#ddd';
    window.ctx=ctx;
    // 水平网格线  分成10份
    for(var i=0; i< step+1;i++){
        console.log(i);
         ctx.moveTo(0,h/step*i);
         ctx.lineTo(w,h/step*i);
        //绘制坐标
        if(i%2===0){
            var text = $('<div class="text"></div>');
            text.text(500*i);
            text.css({
                width:'60px',
                left:-65,
                fontSize:pei*20+'px',
                bottom:h/step*i/2-10,
                textAlign:'right',
                //border:'solid 1px red'
            });
            component.append(text);
        }
    }
    // 垂直网格线
    step =cfg.data.length;
    var cols_w = w/(step+1);//列宽
    for(var i=0;i<step+2;i++){
        ctx.moveTo(cols_w*i,0);
        ctx.lineTo(cols_w*i,h);
        }
    ctx.stroke();
    component.append(canvas);


    var canvas =document.createElement('canvas');
    var ctx =canvas.getContext('2d');
//        var h = cfg.height*per;
    canvas.width = ctx.width = w;
    canvas.height = ctx.height = h;
    // 绘制折线数据--数据层
    /**
    * 绘制折线以及对应的阴影
    * @param {float} per 0-1 之间
    * */
    function  draw(per) {
       ctx.clearRect(0,0,w,h);
        ctx.beginPath();
        ctx.lineWidth = 3 ;
        ctx.strokeStyle = '#ff8878';
        var x = 0;
        var y = 0;

        // 画点
        for(var i=0;i<step;i++ ){
            var item = cfg.data[i];
            x=cols_w*(i+1);
            y=h*(1-item[1]/5000*per);
            // 画点、 填充文字、
            ctx.moveTo(x,y);
            ctx.arc(x,y,3,0,2*Math.PI);
        }

        // 画线
        ctx.moveTo(cols_w,h*(1-cfg.data[0][1]/5000*per));

        for(var i=0;i<step;i++){
            var item = cfg.data[i];
            x=cols_w*(i+1);
            y=h*(1-item[1]/5000*per);
            ctx.lineTo(x,y);
        }
        ctx.stroke(); // 收线

        // 填充阴影
        ctx.lineTo(x,h);
        ctx.lineTo(w/(step+1),h);
        ctx.fillStyle=('rgba(255, 192, 203, 0.58)');
        ctx.fill();
        component.append(canvas);
    }
    draw(1);

    // 入场、出场动画
    var timer;
    component.on('onLoad', function () {
        var num = 0; // 动画执行步数
        var speed= 1;
        timer=setInterval(function () {
                if(num<100){
                    num++;
                    draw(num/100)
                }else{
                    clearInterval(timer);
                }
            },10/speed++);
        return false;
    }).on('onLeave', function () {
        clearInterval(timer);
        draw(0);
        return false;
    });
    return component;
};